<template>
  <div class="AttributeTab-container attributeTab">
    <div class="attributeTab-header">
      <span class="title">构件属性</span>
      <a-icon
        type="close"
        :style="{ color: '#333', fontSize: '14px' }"
        @click="onCancel"
      />
    </div>
    <div class="attributeTab-container">
      <div
        v-if="uuid"
        class="tabContainer"
      >
        <div class="list-top-item">
          <a-row>
            <a-col :span="10">
              名称 ：
            </a-col>
            <a-col :span="14">
              {{ componentParms && componentParms.name }}
            </a-col>
          </a-row>
        </div>
        <div class="list-top-item">
          <a-row>
            <a-col :span="10">
              设备ID ：
            </a-col>
            <a-col :span="14">
              {{ componentParms && componentParms.entityId }}
            </a-col>
          </a-row>
        </div>
        <div class="list-top-item">
          <a-row>
            <a-col :span="10">
              楼层 ：
            </a-col>
            <a-col :span="14">
              {{ componentParms && componentParms.floor }}
            </a-col>
          </a-row>
        </div>
        <div class="list-top-item">
          <a-row>
            <a-col :span="10">
              专业 ：
            </a-col>
            <a-col :span="14">
              {{ componentParms && componentParms.domain }}
            </a-col>
          </a-row>
        </div>
        <div class="list-top-item">
          <a-row>
            <a-col :span="10">
              类型 ：
            </a-col>
            <a-col :span="14">
              {{ componentParms && componentParms.category }}
            </a-col>
          </a-row>
        </div>
        <div class="group-context">
          <a-collapse>
            <a-collapse-panel
              v-for="item in propertyParams"
              :key="item.key"
              :header="item.key"
            >
              <ul>
                <li
                  v-for="(i,index) in item.data"
                  :key="index"
                  class="parmShow"
                >
                  <span class="parmKey">{{ `${i.key}:` }}</span>
                  <span class="parmValue">{{ i.value ? i.value : '暂无数据' }}</span>
                </li>
              </ul>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
      <div
        v-else
        class="noData"
      >
        <p>暂无数据，请选择构件！</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Collapse } from 'ant-design-vue'
export default {
  components: {
      ACollapse: Collapse,
      ACollapsePanel: Collapse['Panel'],
  },
  props: ["bimData", "uuid"],
  data() {
    return {
      state: {
        componentParms: [],
        propertyParams: [],
      },
    };
  },
  computed: {
      componentParms() {
          return this.state.componentParms
      },
      propertyParams() {
          return this.state.propertyParams
      }
  },
  watch: {
    bimData() {
      this.getAllRelationParamter(this.bimData, this.uuid);
    },
    uuid() {
      this.getAllRelationParamter(this.bimData, this.uuid);
    },
  },
  mounted() {
    this.getAllRelationParamter(this.bimData, this.uuid);
  },
  methods: {
    setState(data) {
      this.state = {
        ...this.state,
        ...data,
      };
    },
    //根据group字段将数据进行重新分组
    handleParamsGroup(paramsList) {
      let paramsMap = {};
      let destArray = [];
      for (let i = 0; i < paramsList.length; i++) {
        let params = paramsList[i];
        if (!paramsMap[params.group]) {
          destArray.push({
            key: params.group,
            data: [params],
          });
          paramsMap[params.group] = params;
        } else {
          for (let j = 0; j < destArray.length; j++) {
            let dest = destArray[j];
            if (dest.key === params.group) {
              dest.data.push(params);
              break;
            }
          }
        }
      }
      return destArray;
    },
    //获取构件属性数据
    async getAllRelationParamter(bimData, uuid) {
      let componentParms, propertyParams;
      componentParms = await bimData
        .getWINDDataQuerier()
        .getEntityParameterL(uuid);
      if (componentParms && componentParms.properties) {
        propertyParams = this.handleParamsGroup(componentParms.properties);
      }
      this.setState({
        componentParms,
        propertyParams,
      });
    },
    onCancel() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.attributeTab {
  color: #333;
  border: 2px solid rgba(245, 245, 245, 1);
  background: rgba(255, 255, 255, 1);
  width: 280px;
  // max-height: 456px;
  z-index: 99;
  border-radius: 4px;
  text-align: left;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .attributeTab-header {
    padding: 13px 10px 13px 16px;
    background: rgba(245, 245, 245, 1);
    .title {
      display: inline-block;
      font-size: 14px;
      letter-spacing: 0;
    }
    .anticon {
      float: right;
      text-align: center;
      margin-top: 2px;
    }
  }
  .attributeTab-container {
    flex: 1;
    height: 412px;
    font-size: 14px;
    overflow-y: auto;
    .ant-tabs {
      height: 100%;
    }
    .ant-tabs-bar {
      margin-bottom: 0;
    }
    .ant-tabs-nav .ant-tabs-tab {
      color: #333;
    }
    .ant-tabs > .ant-tabs-content {
      height: calc(100% - 25px);
      max-height: none;
      background: #fff;
    }
    .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
    .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
      color: #333;
    }
    .noData {
      height: 380px;
      p {
        line-height: 250px;
        font-family: 400;
        text-align: center;
      }
    }
    .list-top-item {
      color: #333;
      background: #fff;
      padding: 10px 10px 10px 35px;
      border-bottom: 1px solid #d9d9d9;
    }
    .group-context {
      .ant-collapse {
        color: #333;
        background: #fff;
        border: none;
        .ant-collapse-item:last-child {
          border-bottom: none;
        }
      }
      .ant-collapse-header {
        color: #333;
      }
      /deep/.ant-collapse-content > .ant-collapse-content-box {
        background: rgba(245, 245, 245, 1);
      }
      .parmShow {
        color: #333;
        .parmKey {
          margin-right: 5px;
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .attributeTab {
    top: 10%;
    width: 260px;
    .attributeTab-container {
      height: 312px;
      .noData {
        height: 280px;
        p {
          line-height: 200px;
        }
      }
    }
  }
}
</style>